<template>
  <!--课程购买-->
  <div>
    <headers></headers>
    <div class="padding88">
      <div class="divider">
        <div class="auto">
            <span v-if="type === 1">
            <router-link to="/">首页</router-link><span>></span><router-link to="/ziliao/chongzhi">学习币充值</router-link><span>></span><span>结算中心</span>
            </span>
            <span v-if="type === 2">
              <router-link to="/">首页</router-link><span>></span><router-link to="/ceping">人才能力测评</router-link><span>></span><span>结算中心</span>
            </span>
            <span v-if="type === 3">
              <router-link to="/">首页</router-link><span>></span><router-link :to="{name:'courselist',query:{coursetype:0}}">推荐课程列表</router-link><span>></span><router-link :to="{name:'coursedetail',query:{courseId:order.targetId}}">{{order.orderBody}}</router-link><span>></span><span>结算中心</span>
            </span>
            <span v-if="type === 4">
              <router-link to="/">首页</router-link><span>></span><router-link :to="{name:'offcourselist',query:{pageNumber:1}}">线下课程列表</router-link><span>></span><router-link :to="{name:'offcoursedetail',query:{courseId:order.targetId}}">{{order.orderBody}}</router-link><span>></span><span>结算中心</span>
            </span>
            <span v-if="type === 5">
              <router-link to="/">首页</router-link><span>></span><router-link :to="{name:'zhibolist',query:{pageNumber:1}}">在线直播列表</router-link><span>></span><router-link :to="{name:'zhibodetail',query:{liveId:order.targetId}}">{{order.orderBody}}</router-link><span>></span><span>结算中心</span>
            </span>
            <span v-if="type === 6">
              <router-link to="/">首页</router-link><span>></span><router-link to="/vip">VIP会员</router-link><span>></span><span>结算中心</span>
            </span>
        </div>
      </div>
      <ul>
        <li><Icon type="ios-checkmark-circle"  color="#009900" size="52"/></li>
        <li class="font14" >您已支付成功,订单金额<span>￥{{order.orderAmount}}</span></li>
        <li class="font14" >{{count}}s后返回</li>
      </ul>
    </div>

    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
    <footers></footers>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .divider{
    height: 60px;
    background-color: #2F261E;
    font-size: 14px;
    line-height: 60px;
    text-align: left;
    color: #fff;
    span{
      margin: 0 10px;
    }
    a{
      color: #fff;
      &:hover{
        color: #9C7649;
        font-weight: 700;
      }
    }
  }
  ul{
    width: 1200px;
    background-color: #fff;
    padding: 150px 0;
    margin: 40px auto;
    text-align: center;
    color: #333;
    li:nth-child(2){
      font-size: 20px;
      margin: 10px 0 20px;
    }
    li:last-child{
      /*font-size: 16px;*/
      font-size: 14px;
      span{
        color: #ff0000;
      }
    }
  }

</style>
<script type="text/ecmascript-6">
  import headers from '../template/header'
  import footers from '../template/footer'
  import {orderbuyPageWeb,centreInfoWeb,orderSuccess,loginApp} from '../../http'
  import {getStore,setStore} from "../../storage";

  export default {
    name: 'buy',
    props: {},
    data() {
      return {
        timer:'',
        count:3,
        orderId:this.$route.query.orderId,
        type:'',
        orderStatus:'',
        payType:'',
        topTitle:'',
        order:'',
        mobile:'',
        isSpinShow:false,
      };
    },
    methods: {
    },
    created() {
      //订单信息查询
      if(this.isSpinShow === false) {
        this.isSpinShow = true;
        orderSuccess({orderId: this.orderId}).then(res => {
            if(res.code === 200) {
              this.isSpinShow = false;
              this.order = res.data.order;
              this.mobile = res.data.mobile;
              //定时跳转相应页面
              if (res.data.order.orderEntity.code === 'OT_TOP') {
                //跳转学习币充值
                this.permitCoin = true;
                this.type = 1;
                this.timer = setInterval(() => {
                  if (this.count > 0) {
                    this.count--;
                  } else {
                    clearInterval(this.timer);
                    this.$router.push({
                      name: 'chongzhi'
                    })
                  }
                }, 1000);
              } else if (res.data.order.orderEntity.code === 'OT_APPRAISAL') {
                //跳转能力测评
                this.type = 2;
                this.timer = setInterval(() => {
                  if (this.count > 0) {
                    this.count--;
                  } else {
                    clearInterval(this.timer);
                    this.$router.push({
                      name: 'ceping'
                    })
                  }
                }, 1000);
              } else if (res.data.order.orderEntity.code === 'OT_COURSE') {
                //跳转课程
                this.type = 3;
                this.timer = setInterval(() => {
                  if (this.count > 0) {
                    this.count--;
                  } else {
                    clearInterval(this.timer);
                    this.$router.push({
                      name: 'coursedetail',
                      query: {
                        courseId: res.data.order.targetId
                      }
                    })
                  }
                }, 1000);
              } else if (res.data.order.orderEntity.code === 'OT_OFFCOURSE') {
                this.permitCoin = true;
                //跳转线下课程
                this.type = 4;
                this.timer = setInterval(() => {
                  if (this.count > 0) {
                    this.count--;
                  } else {
                    clearInterval(this.timer);
                    this.$router.push({
                      name: 'offcoursedetail',
                      query: {
                        courseId: res.data.order.targetId
                      }
                    })
                  }
                }, 1000);
              } else if (res.data.order.orderEntity.code === 'OT_LIVE') {
                //跳转直播
                this.type = 5;
                this.timer = setInterval(() => {
                  if (this.count > 0) {
                    this.count--;
                  } else {
                    clearInterval(this.timer);
                    this.$router.push({
                      name: 'zhibodetail',
                      query: {
                        liveId: res.data.order.targetId
                      }
                    })
                  }
                }, 1000);
              } else if (res.data.order.orderEntity.code === 'OT-EXAM') {
                  //跳转考试报名
                  this.type = 7;
                  this.timer = setInterval(() => {
                      if (this.count > 0) {
                          this.count--;
                      } else {
                          clearInterval(this.timer);
                          this.$router.push({
                              name: 'myExamPage',
                          })
                      }
                  }, 1000);
              } else if (res.data.order.orderEntity.code === 'OT_STUDY') {
                  //跳转继续教育
                  this.type = 8;
                  this.timer = setInterval(() => {
                      if (this.count > 0) {
                          this.count--;
                      } else {
                          clearInterval(this.timer);
                          this.$router.push({
                              name: 'myzhengshu',
                          })
                      }
                  }, 1000);
              } else {
                //跳转vip页面
                this.type = 6;
                this.vipxy = true;
                this.timer = setInterval(() => {
                  if (this.count > 0) {
                    this.count--;
                  } else {
                    clearInterval(this.timer);
                    this.$router.push({
                      name: 'vip',
                    })
                  }
                }, 1000);
              }
              if (getStore('token') === '' || getStore('token') === undefined) {
                loginApp({username: this.mobile, password: '123456'}).then(res => {
                  if (res.code === 200) {
                    //setStore('token', res.data.access_token);
                  } else {
                    this.$Notice.warning({
                      title: "登录提醒",
                      desc: "登录状态异常，请重新登录",
                      duration: 3,
                    });
                  }
                }).catch()
              }
            }else{
              this.isSpinShow = false;
              this.$router.push({
                name:'index'
              })
            }
        }).catch()
      }
    },
    destroyed(){
      clearInterval(this.timer);
    },
    components: {
      headers,
      footers
    }
  }
</script>
